import React from 'react'


import { useDispatch, useSelector } from 'react-redux'

// import axios from 'axios'

import { listAddActions } from './store/actions/listActions'

export default function List () {

    const list = useSelector((state) => state.list)
    const dispatch = useDispatch()

    //  改造前
    // const handlerClick = async () => {


    //     let { data } = await axios.get('http://localhost:3000/assets')
    //     dispatch({ type: 'list_add', payload: data })

    // }

    // 改造后
    const handlerClick = (e, val) => {

        // listAddActions()  执行完后返回一个Promise  
        dispatch(listAddActions(val))



    }


    return (

        <>
            <hr />
            <div>List 組件</div>
            <button onClick={(e) => handlerClick(e, 10)}>点击发送请求</button>

            <ul>
                {list.map(item => <li key={item.name}>   {item.name}</li>)}
            </ul>
        </>


    )
}
